<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/firsthop' }">首页</el-breadcrumb-item>
            <!--            <el-breadcrumb-item><a href="/">奖项查询</a></el-breadcrumb-item>-->
            <el-breadcrumb-item>班级列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索区域-->
        <h2>班级列表</h2>
        <el-table :data="classList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
            <el-table-column type="index"></el-table-column><!--索引列-->
            <!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
            <el-table-column prop="classId" label="班级号" width="400"></el-table-column>
            <el-table-column prop="className" label="课程名" width="400"></el-table-column>
            <el-table-column prop="teacherName" label="班主任" width="300"></el-table-column>
            <el-table-column  label="操作" width="180">
                <template slot-scope="scope">
                    <!--修改按钮-->
                    <!--把这一行对应的id值传到处理函数中@click="showEditDialog(scope.row.id)"-->
                    <el-button @click="getStudentList(scope.row.classId)" type="primary" style="margin-left: 16px;" >
                        查看班级学生
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer
                :visible.sync="drawer"
                size="60%">
            <div>
<!--                <el-button @click="innerDrawer = true">打开里面的!</el-button>-->
                <el-card>
                    <el-table :data="studentList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
                        <el-table-column type="index"></el-table-column><!--索引列-->
                        <!--            <el-table-column prop="contestId" label="竞赛ID" width="100"></el-table-column>-->
                        <el-table-column prop="studentName" label="学生姓名"></el-table-column>
                        <el-table-column prop="gender" label="性别"></el-table-column>
                        <el-table-column prop="stuIdCard" label="身份证号"></el-table-column>
                        <el-table-column prop="homeAddress" label="家庭住址"></el-table-column>
                        <el-table-column prop="parPhone" label="家长联系方式"></el-table-column>
                        <el-table-column prop="juniorHighSchool" label="毕业初中"></el-table-column>
                        <el-table-column prop="admissionMethod" label="录取方式"></el-table-column>
                        <el-table-column prop="grade" label="年级"></el-table-column>
                        <el-table-column prop="type" label="学生类型"></el-table-column>
                        <el-table-column prop="studentNumber" label="学号"></el-table-column>
                        <!--                        <el-table-column  label="操作" width="180">-->
                        <!--                            <template slot-scope="scope">-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                    </el-table>
                </el-card>
                <el-drawer
                        title="我是里面的"
                        :append-to-body="true"
                        :before-close="handleClose"
                        :visible.sync="innerDrawer">
                </el-drawer>
            </div>
        </el-drawer>
<!--        <el-dialog-->
<!--                title="发布课程"-->
<!--                :visible.sync="addContestVisible"-->
<!--                width="40%"-->
<!--                @close="addDialogClosed">-->
<!--            <el-form ref="addFormRef" :model="addForm"  label-width="100px">-->
<!--                <el-form-item label="课程名称" prop="className">-->
<!--                    <el-input v-model="addForm.className" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="课程号" prop="classNumber">-->
<!--                    <el-input v-model="addForm.classNumber" ></el-input>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--            &lt;!&ndash;底部按钮区&ndash;&gt;-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="addContestVisible = false">取 消</el-button>&lt;!&ndash;点击取消隐藏对话框&ndash;&gt;-->
<!--                <el-button type="primary" @click="addclass">确 定</el-button>&lt;!&ndash;点击确定也会隐藏对话框&ndash;&gt;-->
<!--            </span>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
    export default {
        name: "class",
        data() {
            return {
                drawer: false,
                innerDrawer: false,
                //获取用户列表的参数对象
                classList: [],
                addContestVisible:false,
                addForm:{},
                studentList:[],
            }
        },
        created() {
            this.getClassList()
        },
        methods: {
            async getStudentList(classId){
                this.drawer = true
                const {data: res} = await this.$http.post('studentForThisClass',this.$qs.stringify({
                    classId:classId
                }))//这里用get的话传到后端收到的数据是null
                this.studentList = res.data;
                console.log(this.studentList);
            },
            handleClose(done) {
                this.$confirm('还有未保存的工作哦确定关闭吗？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            async getClassList() {
                const {data: res} = await this.$http.get('getClass',{
                    params: this.queryInfo
                })
                this.classList = res.data
            },
            // async addclass(){
            //     const {data: res} = await this.$http.post('addClass', this.addForm)
            //     this.addContestVisible = false
            //     this.$message.success('发布课程成功');
            //     this.getclassList()
            //
            // },
            addDialogClosed() {
                this.$refs.addFormRef.resetFields()
            },
        }
    }
</script>

<style scoped>

</style>